<template>
  <div class="hot_article">
    <span class="jinqi" @click="jinqihandel" ref="jinqi">近期文章</span>
    <span class="hot" @click="hothandel" ref="hot">热门文章</span>
    <div class="box">
      <div class="zhezhao" v-if="zhezhao">
        <p>加载中  <i>. . . . . . .</i></p>
      </div>
      <ul class="article_box" v-for="items of arti" :key="items.id" ref="uls">
        <li class="class" :title="items.tags">{{items.tags}}</li>
        <li class="title" @click="toAticle" :id="items.id">{{items.title}}</li>
        <li class="intros">{{items.summary}}</li>
        <li class="user">
          <span class="s">{{items.nickname}}</span>
          <span class="ss">{{items.createTime}}</span>
          <div class="span_box">
            <span class="iconfont s1">{{'&#xe693;  '+ items.viewSize}}</span>
            <span class="iconfont s2">{{'&#xe605;  '+ items.zanSize}}</span>
            <span class="iconfont s4">{{'&#xe616;  '+ items.commentSize}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getHomeArticals, getArticalSmall } from 'com/shuju.js'
import { mapState } from 'vuex'
export default {
  name: 'HomeHot',
  data () {
    return {
      zhezhao: true
    }
  },
  watch: {
    arti (val) {
      if (val.length === 0) {
        this.zhezhao = true
      } else {
        this.zhezhao = false
      }
    }
  },
  computed: {
    ...mapState({
      arti: 'btnartical'
    })
  },
  methods: {
    toAticle () {
      var id = event.target.getAttribute('id')
      getArticalSmall(id, this)
    },
    jinqihandel () {
      this.$refs.jinqi.style.borderBottom = '3px solid rgb(15,113,213)'
      this.$refs.hot.style.borderBottom = '3px solid rgb(245,248,249)'
      const data1 = new FormData()
      data1.set('orderby', 'createTime')
      getHomeArticals(data1, this)
    },
    hothandel () {
      this.$refs.jinqi.style.borderBottom = '3px solid rgb(245,248,249)'
      this.$refs.hot.style.borderBottom = '3px solid rgb(15,113,213)'
      const data2 = new FormData()
      data2.set('keywords', 'remen')
      getHomeArticals(data2, this)
    }
  },
  mounted () {
    if (this.arti.length === 0) {
      this.zhezhao = true
    } else {
      this.zhezhao = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .hot_article{
    position: relative
    width: 800px
    height: auto
    float: left
    margin-top: .6rem
    margin-left: .3rem
    background-color: rgb(245,248,249)
    .content{
      position: absolute
      right: 0
      font-weight: bold
      font-size: .7rem
      color: rgb(15,113,213)
      display: inline-block
      cursor: pointer
    }
    .jinqi{
      cursor: pointer
      font-weight: bold
      font-size: .5rem
      color: rgb(150,150,150)
      border-bottom: 3px solid rgb(15,113,213)
    }
    .hot{
      display: inline-block
      margin-left: .5rem
      font-weight: bold
      cursor: pointer
      font-size: .5rem
      color: rgb(150,150,150)
      border-bottom: 3px solid rgb(245,248,249)
    }
    .box{
      height: auto
      min-height: 800px
      width: auto
      .zhezhao{
        margin-top: .8rem
        width: 800px
        height: 800px
        position: relative
        background-color: rgb(245,248,249)
        p{
          position: relative
          top: 40%
          left: 40%
          color: rgb(120,120,120)
          font-size: .5rem
          font-weight: bold
          i{
            animation: 1.5s linear infinite loading
            transition: all .5s
          }
        }
        @keyframes loading{
          0%{
            opacity: 1
          }
          25%{
            opacity: .5
          }
          50%{
            opacity: 0
          }
          75%{
            opacity: .5
          }
          100%{
            opacity: 1
          }
        }
      }
      .article_box{
        position: relative
        list-style: none
        padding: 0
        margin: 0
        width: auto
        height: auto
        margin-top: .5rem
        border: 1px solid rgb(230,230,230)
        background-color: rgb(255,255,255)
        box-shadow: 0 0 1.5px rgb(220,220,220)
        transition: box-shadow .5s
        .class{
          position: absolute
          right: 15px
          width: 100px
          height: 20px
          font-size: .4rem
          font-weight: 500
          font-family: 'Kozuka Mincho Pr6N H'
          color: white
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
          text-align: center
          background-color: rgb(15,113,213)
          padding: .3rem
        }
        .title{
          font-size: .5rem
          padding: .3rem
          width: 600px
          height: 30px
          color: rgb(15,60,213)
        }
        .intros{
          padding: .3rem
          padding-top: 0
          color: rgb(120,120,120)
          width: 600px
          height: 60px
          line-height: .4rem
          letter-spacing: 1px
        }
        .user{
          position: relative
          padding-left: .3rem
          padding-right: .3rem
          padding-top: .2rem
          font-weight: bolder
          color: rgb(60,60,60)
          width: 600px
          height: 30px
          .s{
            position: relative
            color: rgb(210,49,10)
          }
          .ss{
            position: absolute
            left: 260px
          }
          .span_box{
            position: absolute
            top: 10px
            right: -40px
            width: 300px
            font-weight: 100
            span + span{
              margin-left: 30px
            }
          }
        }
      }
    }
    .pages{
      list-style: none
      padding: 0
      margin: 0
    }
    .article_box:hover{
      cursor: pointer
      box-shadow: 2px 2px 5px rgb(150,150,150)
    }
  }
</style>
